<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import FromPhone from "@/views/login/c-cpns/form_phone.vue"
import FromAccount from "@/views/login/c-cpns/form_account.vue"
import { localCache } from '@/utils/cache';


const activeName = ref('accountnumber') // 默认打开账号登录
let checked = ref<boolean>(localCache.getCache('checked') ?? false)  // 记住密码
// 监听记住密码的状态 发送改变就更新

watch(checked , (newValue) => {
  if (newValue) {
    localCache.setCache('checked',newValue)
  }else{
    // localCache.setCache('checked',newValue)
    localCache.removeCache('checked')
  }
})


let fromAccountRef = ref<InstanceType<typeof FromAccount>>() // 获取子组件实例
const handleLogin = () => {
  if (activeName.value == "accountnumber") {
      console.log('登录')
      fromAccountRef.value?.submitForm( checked.value )
  }else{
      console.log('手机号登录')
  }
}
</script>

<template>
  <div class="login_panel">
    <!-- 登录表单组件 -->
    <div class="title">login_panel</div>
    <div class="tabs">
      <el-tabs v-model="activeName" stretch class="demo-tabs">
        <el-tab-pane label="账号登录" name="accountnumber">
            <!-- tabs账号登录标题部分 -->
            <template #label>
              <div class="custom-tabs-label">
                <el-icon><User /></el-icon>
                账号登录
              </div>
            </template>
            <FromAccount ref="fromAccountRef" />
          </el-tab-pane>
          <el-tab-pane label="手机号登录" name="phone">
            <!-- tabs 手机号登录标题部分 -->
            <template #label>
              <div class="custom-tabs-label">
                <el-icon><Iphone /></el-icon>
                手机号登录
              </div>
            </template>
            <FromPhone />
          </el-tab-pane>
      </el-tabs>
    </div>
    <div class="cotrols">
        <el-checkbox v-model="checked" class="remember-password" label="记住密码" size="large" />
        <el-link type="primary">忘记密码</el-link>
    </div>
    <el-button color="#53a2fc" :dark="true" class="login-btn" @click="handleLogin()">立即登录</el-button>
  </div>
</template>
<style lang="less" scoped>
.login_panel{
    width: 330px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 18px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    padding: 20px;
    .title{
        text-align: center;
        color: #53a2fc;
        font-weight: bold;
        font-size: 22px;
    }
    .tabs{
      .custom-tabs-label{
        display: flex;
        align-items: center;
        .el-icon{
          margin-right: 5px;
        }
      }
    }
    .cotrols{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .remember-password{
        color: #fff;
      }
    }
    .login-btn{
      width: 100%;
      color: #d6daf8;
    }
}


// tabs 标签激活样式
:deep(.el-tabs__item.is-active){
  color: var(--el-color-primary);
}
// tabs 标签未激活样式
:deep(.el-tabs__item){
  color: #fff;
}

</style>